<template>
  <section>
     
    <!-- 面包屑 -->
     <breadcrumbs></breadcrumbs>
    <div>
      <div v-if="ischeck==1">已结算</div>
      <div v-else-if="ischeck==0">待结算:待结算回收站个数:{{11}}</div>
    </div>
    <div class="top-details-box">
      <div>
        <el-form ref="searchForm"
                 :model="searchForm"
                 label-width="100px"
                 inline
                 class="demo-form-inline"
                 size='small'
                 style="border-bottom: 1px solid #f6f6f6;">
          <el-form-item label="选择城市">
            <el-select v-model="searchForm.cid"
                       placeholder="请选择城市">
              <el-option v-for="(item,index) in cityData"
                         :key="index"
                         :value="item.cityid"
                         :label="item.cityname"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择回收站">
            <el-select v-model="searchForm.bid"
                       placeholder="请选择回收站">
              <el-option v-for="(item,index) in blackList"
                         :key="index"
                         :label="item.stopName"
                         :value="item.backStopId"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="search">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="primary "
                       style="margin-left:600px"
                       @click="daochu">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <!-- <el-button type="primary ">导出</el-button> -->
      </div>
    </div>
    <div>
      <p>总计收益：&nbsp;&nbsp;<span>{{allMoney/100}}元</span>
      </p>
    </div>
    <div>
      <div class="data-container scroll-table">
        <!-- 按钮列表 -->
        <el-table :data="tableData"
                  border
                  style="width: 100%">
          <el-table-column type="index"
                           label="序号"
                           width="50">
          </el-table-column>
          <el-table-column prop="backStopId"
                           label="回收站编号">
          </el-table-column>
          <el-table-column prop="stopName"
                           label="回收站名称">
          </el-table-column>
          <el-table-column prop="cityName"
                           label="所在城市">
          </el-table-column>
          <el-table-column prop="address"
                           label="详细地址">
          </el-table-column>
          <el-table-column prop="contactName"
                           label="管理人">
          </el-table-column>
          <el-table-column prop="contactPhone"
                           label="联系方式">
          </el-table-column>
          <el-table-column prop="allCount"
                           label="回收总数">
          </el-table-column>
          <el-table-column prop="orderCount"
                           label="次品总数">
          </el-table-column>
          <el-table-column prop="allMoney"
                           label="累计总收益(元)">
            <template slot-scope="scope">
              <div>{{scope.row.allMoney/100}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="payState"
                           label="结算状态">
            <template slot-scope="scope">
              <div v-if="scope.row.payState==1">已结算</div>
              <div v-if="scope.row.payState==0">待结算</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </section>
</template>

<script>
import ExportExcel from "../../utils/ExportExcel.js";
import breadcrumbs from "@/components/breadcrumbs.vue";
export default {
  name: "houseDetail",
  components: {

    breadcrumbs,
  },
  data () {
    return {
      month: "",
      ischeck: "",
      allMoney: "",
      detailData: {
        list: [],

      },
      blackList: [],
      cityData: [],
      searchForm: {
        current: 1,
        size: 10,
        info: "",
        sid: "",
      },
      tableData: [],
    }
  },
  created () {
    // console.log(this.$route.query.id)
    this.month = this.$route.query.month;
    this.ischeck = this.$route.query.ischeck;
    this.allMoney = this.$route.query.allMoney;
    console.log(this.$route.query.allMoney)
    console.log(this.month)
    this.houseData(this.searchForm.current, this.searchForm.size, this.month);
    this.getCityList();
    this.getblackList();
  },
  methods: {
    daochu () {
      console.log("导出")
      this.$api.outorder
        .gethuishouzhanxiangqingOutOrderExcel({
          month: this.month
        })
        .then((d) => {
          let filename = "回收站累计回收总收益明细表.xlsx";
          ExportExcel(d, filename);
        })
        .catch((e) => {
          console.log(e);
        });

    },
    getblackList () {
      this.$api.recycleBin.getAdminBackStopList({
        current: 1,
        size: 1000,
      }).then(res => {
        if (res.code == 200) {
          this.blackList = res.data;

        }
      })
    },
    getCityList () {
      this.$api.city.getAllList().then(d => {
        if (d.code == 200) {
          this.cityData = d.data;
        } else {
          this.$message.error(d.msg);
        }
      }).catch((e) => {
        console.log(e);
      })
    },
    handleReset () {
      this.houseData(this.searchForm.current, this.searchForm.size)
    },
    search () {
      this.houseData(this.searchForm.current, this.searchForm.size, this.month, this.searchForm.bid, this.searchForm.cid)
    },
    houseData (current, size, month, bid, cid) {
      // console.log(mid)
      this.$api.finance.getBackStopBillDetail({
        current: current,
        size: size,
        month: month,
        backStopId: bid,
        cityId: cid
      }).then(res => {
        if (res.code == 200) {
          this.tableData = res.data;
          let result = res.data;
          result.forEach((item) => {
            this.cityData.forEach((op) => {
              if (item.cityid == op.cityid) {
                item.cityName = op.cityname
              }
            })
          })
          // this.tableData = this.detailData.list;
          console.log(this.detailData, 12313123)
        }
      })
    },
  }
}
</script>

<style scoped>
.top-details-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px;
}
.message-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>